<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, reactive, watch } from "vue";
const colors = ['#5470C6', '#EE6666'];
import { Students } from '../../api/MyEcharts/index'
import dayjs from 'dayjs'

var option = {
    color: colors,

    tooltip: {
        trigger: 'none',
        axisPointer: {
            type: 'cross'
        }
    },
    legend: {
        data: [],
        left: '10%',
        top: '',
        textStyle: {
            color: '#fff'
        }
    },
    grid: {

    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: null
    },
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [

    ]
};

let currentTime = Date.now()

let data = reactive([
    dayjs(currentTime - 210000).format('HH:mm:ss'),
    dayjs(currentTime - 18000).format('HH:mm:ss'),
    dayjs(currentTime - 15000).format('HH:mm:ss'),
    dayjs(currentTime - 12000).format('HH:mm:ss'),
    dayjs(currentTime - 9000).format('HH:mm:ss'),
    dayjs(currentTime - 6000).format('HH:mm:ss'),
    dayjs(currentTime - 3000).format('HH:mm:ss'),
])

const Student = function () {
    let ws = new WebSocket("ws://localhost:3002/bigscreen/websockets?id=10086")
    ws.onmessage = function (result) {
        console.log(result.data, 'webSocket数据');
        let leftBottomData = JSON.parse(result.data)
        let SeriesData: any = []
        for (let i = 0; i < leftBottomData.seriesData.length; i++) {
            let seriesDataItem = {
                name: leftBottomData.legendData[i],
                type: 'line',
                stack: 'Total',
                smooth: true,
                symbol: 'none',
                data: leftBottomData.seriesData[i]
            }
            SeriesData.push(seriesDataItem)
        }

        option.legend.data = leftBottomData.legendData;
        option.xAxis.data = data;
        option.series = SeriesData
    }
}

function getXaisData() {
    var timer = null;
    timer = setInterval(() => {
        data.shift();
        data.push(dayjs(new Date()).format('HH:mm:ss'));
    }, 3000);
    return data
}

watch(data, () => {
    Student()
    var myChart = echarts.init(document.getElementById('main'));
    myChart.setOption(option);
})

onMounted(async () => {
    Student()
    getXaisData()

    var myChart = echarts.init(document.getElementById('main'));

    let res = await Students()

    myChart.setOption(option);
})
</script>

<template>
    <div class="left-Bottom">
        <div class="left-Bottom-img">
            <span style="padding: 10px; color: aliceblue; font-size: 1.5rem; line-height: 3rem;">学生分布情况</span>
        </div>
        <div class="left-Bottom-bottom">
            <div id="main" style="width: 100%;height:100%;"></div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.left-Bottom {
    width: 28rem;
    height: 20rem;
    margin: 0 6rem;
    background-color: rgb(16, 29, 91);

    &-img {
        width: 100%;
        height: 3rem;
        background: url('../../assets/images/leftImg.png') no-repeat center center;
        background-size: 100% 100%;
    }

    &-bottom {
        width: 100%;
        height: 15rem;
        margin-top: 2rem;
        background-color: rgb(29, 46, 107);

    }
}
</style>